<template>
  <div class="app-container">
    <el-row class="row bg-white p-l-60">
      <el-form class="top" label-position="left" label-width="150px">
        <el-form-item label="机构类型" prop="userType">
          <el-select class="filter-item" size="small" v-model="userForm.userType" disabled placeholder="机构类型">
            <el-option v-for="item in userTypeOptions" :key="item.key" :label="item.text" :value="item.key">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <el-form v-if="userForm.userType==1" class="user-form" :validate-on-rule-change="false"  :model="userForm" ref="userForm" label-position="left" label-width="150px">
        <span class="title">企业资质信息</span>
        <hr>
        <el-form-item label="个体工商户名称" prop="company_name">
          <el-input type="text" readonly   :inline-message="true" size="small" v-model="userForm.company_name" placeholder="请输入个体工商户名称"></el-input><br>
          <!--<label class="label">*主体名称需严格按照证件返回，在注册确认后不可更改。避免付款后因主体原因导致认证失败，请详细查阅主体不可更改情况</label>-->
        </el-form-item>
        <el-form-item label="工商营业执照" prop="company_name">
          <img width="150" height="150" :src="userForm.license" style="cursor:pointer" @click="handlePreview" alt="">
        </el-form-item>
        <span class="title">对公账户信息</span>
        <hr>
        <el-form-item class="el-form-item-user"  label="开户名称" prop="bank_accout">
          <el-input type="text" readonly  size="small" v-model="userForm.bank_account" placeholder="请输入开户名称"></el-input><br>
          <!--<label v-if="labelShow" class="label">*对公账户需跟主体证件上的机构名称保持一致，对公账户填写指引若个体工商户无对公账户，可填写与营业执照上法人一致的个人银行卡号</label>-->
        </el-form-item>
        <el-form-item class="el-form-item-user"  label="开户银行" prop="bank_name">
          <el-input type="text" readonly  size="small" v-model="userForm.bank_name" placeholder="请输入开户银行"></el-input><br>
        </el-form-item>
        <el-form-item class="el-form-item-user" label="对公银行账号" prop="bank_card">
          <el-input type="text" readonly  size="small" v-model="userForm.bank_card" placeholder="请输入对公银行账号"></el-input><br>
        </el-form-item>
        <span class="title">认证联系人信息</span>
        <hr>
        <el-form-item class="el-form-item-user" label="联系人姓名" prop="name">
          <el-input type="text" readonly  size="small" v-model="userForm.name" placeholder="请输入联系人姓名"></el-input><br>
          <!--<label v-if="labelShow"  class="label">个体工商户的该人员须为法人本人，且与申请公函的联系人一致，否则审核将不被通过</label>-->
        </el-form-item>
        <el-form-item class="el-form-item-user" label="联系人电话" prop="phone">
          <el-input type="text" readonly  size="small"  v-model="userForm.phone" placeholder="请输入手机号"></el-input><br>
        </el-form-item>
        <el-form-item class="el-form-item-user" label="联系人身份证号码" prop="idcard">
          <el-input type="text" readonly size="small" v-model="userForm.idcard"  placeholder="联系人身份证号码"></el-input><br>
        </el-form-item>
        <el-form-item class="el-form-item-user" label="审核状态" prop="review_status_str">
          <el-input type="text" readonly size="small" v-model="userForm.review_status_str"></el-input><br>
        </el-form-item>
        <el-form-item class="el-form-item-user" style="width: 72.5%"  label="审核意见" prop="review_content" >
          <el-input type="textarea" readonly rows="5" v-model="userForm.review_content"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="small" :disabled="reviewFlag" class="green-btn" @click="handelEnable">审核通过</el-button>
          <el-button type="primary" size="small" :disabled="reviewFlag" class="green-btn" @click="handelDisable">审核不通过</el-button>
        </el-form-item>
      </el-form>
      <el-form v-else-if="userForm.userType==2" class="user-form" :validate-on-rule-change="false"  :model="userForm" ref="userForm" label-position="left" label-width="150px">
        <span class="title">银行账户信息</span>
        <hr>
        <el-form-item class="el-form-item-user"  label="开户银行" prop="bank_name">
          <el-input type="text" readonly size="small" v-model="userForm.bank_name" placeholder="请输入开户银行"></el-input><br>
        </el-form-item>
        <el-form-item class="el-form-item-user" label="对公银行账号" prop="bank_card">
          <el-input type="text" readonly size="small" v-model="userForm.bank_card" placeholder="请输入对公银行账号"></el-input><br>
        </el-form-item>
        <span class="title">联系人信息</span>
        <hr>
        <el-form-item class="el-form-item-user" label="联系人姓名" prop="name">
          <el-input type="text" readonly size="small" v-model="userForm.name" placeholder="请输入联系人姓名"></el-input><br>
          <!--<label v-if="labelShow"  class="label">个体工商户的该人员须为法人本人，且与申请公函的联系人一致，否则审核将不被通过</label>-->
        </el-form-item>
        <el-form-item class="el-form-item-user" label="联系人电话" prop="phone">
          <el-input type="text" readonly size="small" placeholder="请输入手机号" v-model="userForm.phone"></el-input><br>
        </el-form-item>
        <el-form-item class="el-form-item-user" label="联系人身份证号码" prop="idcard">
          <el-input type="text" readonly size="small" v-model="userForm.idcard"  placeholder="联系人身份证号码"></el-input><br>
        </el-form-item>
        <span class="title">审核结果</span>
        <hr>
        <el-form-item class="el-form-item-user" label="审核状态" prop="review_status_str">
          <el-input type="text" readonly size="small" placeholder="请输入手机号" v-model="userForm.review_status_str"></el-input><br>
        </el-form-item>
        <el-form-item class="el-form-item-user" label="审核意见" prop="review_content" >
          <el-input type="textarea" rows="5" v-model="userForm.review_content"></el-input>
        </el-form-item>
        <hr>
        <el-form-item>
          <el-button type="primary" :disabled="reviewFlag" size="small" class="green-btn" @click="handelEnable">审核通过</el-button>
          <el-button type="primary" :disabled="reviewFlag" size="small" class="green-btn" @click="handelDisable">审核不通过</el-button>
        </el-form-item>
      </el-form>
    </el-row>
    <el-dialog
      title="提示"
      :visible.sync="showDialog"
      width="30%"
      center>
      <el-form>
        <el-form-item label="审核意见" >
          <el-input type="textarea" rows="5" v-model="reviewData.review_content"></el-input>
        </el-form-item>
      </el-form>
      <el-button @click="showDialog = false">取 消</el-button>
      <el-button type="primary" @click="userReview">确 定</el-button>
    </el-dialog>
    <el-dialog
      :visible.sync="imagePrivew"
      show-close
      center>
      <span style="display: inline-block;width: 100%;text-align: center">
         <img :src="userForm.license">
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import { getUserinfo, review } from '@/api/user'
  const userTypeOptions = [
    { key: 1, text: '企业' },
    { key: 2, text: '个人' }
  ]
  export default {
    name: 'userview',
    data() {
      return {
        userTypeOptions,
        userForm: {
          company_name: '',
          userType: 1,
          license: '',
          bank_account: '',
          bank_name: '',
          bank_card: '',
          name: '',
          phone: '',
          code: '',
          idcard: '',
          review_content: '',
          review_status_str: ''
        },
        reviewData: {
          userinfo_id: '',
          review_status: '',
          review_content: ''
        },
        labelShow: true,
        fileList: [],
        imageUrl: '',
        loading: false,
        showDialog: false,
        imagePrivew: false,
        show: true,
        userid: '',
        reviewFlag: false
      }
    },
    created() {
      if (this.$route.params.userid) {
        this.userid = parseInt(this.$route.params.userid)
        this.userid = parseInt(this.$route.params.userid)
      }
      this.getUser()
    },
    methods: {
      getUser() {
        const data = {}
        data.userid = this.userid
        getUserinfo(data).then(response => {
          if (response.code === 1) {
            const data = response.data
            if (data.group_name === 'enterprise') {
              this.userForm.userType = 1
              this.userForm.bank_account = data.bank_account
              this.userForm.bank_name = data.bank_name
              this.userForm.bank_card = data.bank_card
            } else if (data.group_name === 'personal') {
              this.userForm.userType = 2
              this.userForm.bank_account = data.person_bank_account
              this.userForm.bank_name = data.person_bank_name
              this.userForm.bank_card = data.person_bank_card
            }
            this.userForm.company_name = data.company_name
            this.userForm.license = data.license_str
            this.userForm.name = data.name
            this.userForm.phone = data.phone
            this.userForm.idcard = data.idcard
            this.userForm.review_content = data.review_content
            this.reviewData.userinfo_id = data.userinfo_id
            if (data.review_status !== 2) {
              this.reviewFlag = true
            }
            switch (data.review_status) {
              case 1:
                this.userForm.review_status_str = '审核通过'
                break
              case 2:
                this.userForm.review_status_str = '未审核'
                break
              case 3:
                this.userForm.review_status_str = '审核不通过'
                break
            }
          }
        })
      },
      handlePreview() {
        this.imagePrivew = true
      },
      handelEnable() {
        this.reviewFlag = true
        this.reviewData.review_status = 1
        this.reviewData.review_content = ''
        review(this.reviewData).then(response => {
          if (response.code === 1) {
            this.$message({
              title: '成功',
              message: '审核成功',
              type: 'success',
              duration: 3000
            })
          } else {
            setTimeout(() => {
              this.$message.error(response.msg)
            }, 3 * 1000)
          }
        })
      },
      handelDisable() {
        this.reviewFlag = true
        this.showDialog = true
      },
      userReview() {
        this.reviewData.review_status = 3
        review(this.reviewData).then(response => {
          if (response.code === 1) {
            this.$message({
              title: '成功',
              message: '审核成功',
              type: 'success',
              duration: 3000
            })
            this.reviewFlag = true
            this.showDialog = false
          } else {
            setTimeout(() => {
              this.$message.error(response.msg)
            }, 3 * 1000)
            this.showDialog = false
          }
        })
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss">
  $bg:#2d3a4b;
  $light_gray:#eee;

  /* reset element-ui css */
  .el-form-item {
    margin-bottom: 22px;
  }
  .el-input {
    width: 70%;
  }
  .el-input-w {
    width: 56%;
  }
  .upload-w{
    width: 60%;
  }
  .label{
    font-size: 12px;
    color: #606266;
    margin-top: 7px;
    font-weight: normal
  }
</style>
<style rel="stylesheet/scss" lang="scss" scoped>
  $bg: #f3f3f3;
  $dark_gray:#889aa4;
  $light_gray:#eee;
  .register-container {
    position: fixed;
    height: 100%;
    width: 100%;
    background-color: $bg;
    hr{
      border:0;
      background-color:$bg;
      height:1px;
    }
    .green-btn{
      color: #fff;
      background-color: #16b8bd;
      border-color: #16b8bd;
      width:130px;
    }
    .top{
      height: 50px;
      width: 1200px;
      line-height: 50px;
      padding-left: 35px;
      padding-top:5px;
      margin: 10px auto 0 auto;
      background-color: #fff;
    }
    .filter-item {
      width:330px;
      display: inline-block;
      vertical-align: middle;
      margin-bottom: 10px;
    }
    .user-form {
      position: absolute;
      left: 0;
      right: 0;
      width: 1200px;
      padding: 35px 35px 15px 35px;
      margin: 15px auto;
      background-color: #fff;
    }

    .title {
      font-size: 18px;
      color: #000;
      margin: 0px auto 20px auto;
    }
    .code{
      text-align: center;
      background-color: #16b8bd;
      width: 133px;
      height: 34px;
      line-height: 34px;
      color: #ffff;
      display: inline-block;
      cursor: pointer;
      border: none;
      border-radius: 4px;
    }
    .count{
      text-align: center;
      background-color: #dce1e7;
      width: 133px;
      height: 34px;
      line-height: 34px;
      color: #ffff;
      display: inline-block;
      cursor: pointer;
      border: none;
    }
  }
</style>
